﻿<template>
    <div class="pic_container">
       <div
        :class="['point','point-'+(value)]" 
        v-for="value in count" 
        :key="value">
 
       </div>
       <div class="card">
        <div class="button">
                <el-button type="text" @click="getImg"></el-button>
                <el-button type="text" @click="startTap">开始标点</el-button>
                <el-button type="text" @click="endTap">结束标点</el-button>
                
            </div>
            <div class="img" @click="handle" >
                <img :src="src" alt="">
            </div>
            <!-- <el-upload
            :on-change="change"
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> -->
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            count:0,
            ifstart:false,
            src:'',
            points:[],
            ip:''
        }
    },
    methods:{
        handle(e){
            let that=this
            if(this.ifstart){
                that.count=that.count+1
                this.$nextTick(()=>{
                    var pointList=document.getElementsByClassName('point')
                    pointList[pointList.length-1].style.top=e.pageY+'px'
                    pointList[pointList.length-1].style.left=e.pageX+'px'
                    console.log("e.pageY",e.pageY)
                    console.log("offset",e.offsetX)
                    that.points.unshift([e.offsetX,e.offsetY])

                })
            }

        },
        change(file){
            let that=this
            new Promise((resolve, reject) => {
                const blob = new Blob([file.raw], { type: "image/jpg" }); // 必须指定type类型
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = () => resolve(reader.result);
                reader.onerror = (error) => reject(error);
            }).then((base64) => {
                console.log("base64", base64);
                that.src=base64
            });
        },
        startTap(){
            this.ifstart=true
            
        },
        endTap(){ 
            let that=this
            this.ifstart=false
            this.count=0
            let data={
                points:that.points
            }
            console.log("points",this.points)
            this.$http("/points","POST",data,true,function(resp){
                 that.$router.push("/warning")
            })
            this.points=[]
            

        },
        func(){
            let that=this
            const getIPs =(callback) => {
      var ip_dups = {};
      var RTCPeerConnection = window.RTCPeerConnection
        || window.mozRTCPeerConnection
        || window.webkitRTCPeerConnection;
      var useWebKit = !!window.webkitRTCPeerConnection;
      var mediaConstraints = {
        optional: [{ RtpDataChannels: true }]
      };
      // 这里就是需要的ICEServer了
      var servers = {
        iceServers: [
          { urls: "stun:stun.services.mozilla.com" },
          { urls: "stun:stun.l.google.com:19302" },
        ]
      };
      var pc = new RTCPeerConnection(servers, mediaConstraints);
      function handleCandidate (candidate) {
        var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
        var hasIp = ip_regex.exec(candidate)
        if (hasIp) {
          var ip_addr = ip_regex.exec(candidate)[1];
          if (ip_dups[ip_addr] === undefined)
            callback(ip_addr);
          ip_dups[ip_addr] = true;
        }
      }
      // 网络协商的过程
      pc.onicecandidate = function (ice) {
        if (ice.candidate) {
          handleCandidate(ice.candidate.candidate);
        }
      };
 
      pc.createDataChannel("");
      //创建一个SDP(session description protocol)会话描述协议 是一个纯文本信息 包含了媒体和网络协商的信息
      pc.createOffer(function (result) {
        pc.setLocalDescription(result, function () { }, function () { });
      }, function () { });
      setTimeout(function () {
        var lines = pc.localDescription.sdp.split('\n');
        lines.forEach(function (line) {
          if (line.indexOf('a=candidate:') === 0)
            handleCandidate(line);
        });
      }, 1000);
    }
    getIPs((ip) => {
        that.ip=ip
        this.src = 'http://'+this.ip+'/img'
        console.log("src",this.src)
    });


        },
       


    },
    mounted(){
        this.func();
        // this.src = 'http://'+this.ip+'/img'
        // console.log("src",this.src)
       // let that=this
        // this.src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0"
        //  this.$http("http://10.161.89.54:1000/img","GET",null,true,function(resp){
        //     console.log(resp);
        //     that.src=resp
        //  })

    
    

    },
    created(){
   
    }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }



    *{
        margin:0px;
        padding:0px;

    }
    .point{
        background-color: #000000;
        width:8px;
        height:8px;
        border-radius: 50%;
        position:absolute;

    }
    .pic_container{
        z-index:0;
        -moz-user-select:none; /*火狐*/
        -webkit-user-select:none; /*webkit浏览器*/
        -ms-user-select:none; /*IE10*/
        -khtml-user-select:none; /*早期浏览器*/
        user-select:none;

        box-sizing: border-box;
        min-width:100%;
        min-height:100%;
        background-color: #c9dcd9;
        display:flex;
        justify-content: center;
        padding-top:100px;
        padding-bottom:50px;
        .card{
            
            min-width:100px;
            height:600px;

            padding:20px 40px;
            border-radius: 8px;
            background-color: rgb(255,255,255,0.5);
           // position:relative;
            
            top:100px;
            left:100px;
            
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);

            
        }
        img::before{
            filter:blur(5px);
            
        }

    }
    .img{
            
            z-index:2px;;
        }
    .button{
        height:30px;

    }
    img{
        width:360px;
            height:540px;
    }

</style>